<template>
    <div class="home-box">
        <div class="header">
            <div class="l20">时间单位：</div>
            <el-select style="width: 80px" v-model="dateType" placeholder="请选择">
                <el-option v-for="item in dateTypeOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
            <div class="l20">时间范围：</div>
            <div class="block">
                <el-date-picker
                    v-model="timeFrame"
                    type="daterange"
                    align="right"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :shortcuts="shortcuts"
                >
                </el-date-picker>
            </div>
            <div class="l20">对比数据：</div>
            <el-select v-model="comparativeData" multiple collapse-tags style="margin-left: 20px" placeholder="请选择">
                <el-option v-for="item in comOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
            </el-select>
            <el-button class="l20" type="primary">生成图表</el-button>
        </div>
        <div class="main">
            <div class="dragOptionsBox">
                <DragOptions />
            </div>
            <div class="main-right">
                <DropBox />
            </div>
        </div>

        <!-- <ul>
            <li class="btn" @click="check('Line')">Line</li>
            <li class="btn" @click="check('Bar')">Bar</li>
            <li class="btn" @click="check('Pie')">Pie</li>
        </ul>
        <el-button size="medium" @click="postData">POST</el-button>
        <div class="home">
            <About class="chart-box" />
            <Chart id="diy-chart" ref="diy-chart" class="chart-box" />
        </div> -->
    </div>
</template>

<script>
// @ is an alias to /src
import DragOptions from './show/dataOption/index';
import DropBox from './show/dataOption/dropBox';

export default {
    name: 'Home',
    components: {
        DragOptions,
        DropBox,
        // About,
    },
    data() {
        return {
            dateType: 'day',
            timeFrame: '',
            comparativeData: [],
            dateTypeOptions: [
                { value: 'min', label: '分钟' },
                { value: 'hour', label: '小时' },
                { value: 'day', label: '天' },
            ],
            comOptions: [
                {
                    value: '选项1',
                    label: '黄金糕',
                },
                {
                    value: '选项2',
                    label: '双皮奶',
                },
                {
                    value: '选项3',
                    label: '蚵仔煎',
                },
                {
                    value: '选项4',
                    label: '龙须面',
                },
                {
                    value: '选项5',
                    label: '北京烤鸭',
                },
            ],
            value2: '',
            shortcuts: [
                {
                    text: '最近一周',
                    value: (() => {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                        return [start, end];
                    })(),
                },
                {
                    text: '最近一个月',
                    value: (() => {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                        return [start, end];
                    })(),
                },
                {
                    text: '最近三个月',
                    value: (() => {
                        const end = new Date();
                        const start = new Date();
                        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                        return [start, end];
                    })(),
                },
            ],
            fakeData: {
                name: 'aa',
                data: {},
            },
            post: {
                data: {
                    '2021/04/20': [
                        //col
                        {
                            name: '样例1',
                            value: Math.floor(Math.random() * 100) ** 2,
                        },
                        {
                            name: '样例2',
                            value: Math.floor(Math.random() * 100) ** 2,
                        },
                    ],
                    '2021/04/21': [
                        {
                            name: '样例1',
                            value: Math.floor(Math.random() * 100) ** 2,
                        },
                        {
                            name: '样例2',
                            value: Math.floor(Math.random() * 100) ** 2,
                        },
                    ],
                    '2021/04/22': [
                        {
                            name: '样例1',
                            value: Math.floor(Math.random() * 100) ** 2,
                        },
                        {
                            name: '样例2',
                            value: Math.floor(Math.random() * 100) ** 2,
                        },
                    ],
                    '2021/04/23': [
                        {
                            name: '样例1',
                            value: Math.floor(Math.random() * 100) ** 2,
                        },
                        {
                            name: '样例2',
                            value: Math.floor(Math.random() * 100) ** 2,
                        },
                    ],
                    '2021/04/24': [
                        {
                            name: '样例1',
                            value: Math.floor(Math.random() * 100) ** 2,
                        },
                        {
                            name: '样例2',
                            value: Math.floor(Math.random() * 100) ** 2,
                        },
                    ],
                },
                data2: {
                    keyMap: [
                        { name: '样例1', code: 'A1B1C1' },
                        { name: '样例2', code: 'A2B1C1' },
                        { name: '样例3', code: 'A3B1C1' },
                    ],
                    A1B1C1: [
                        { time: '2021/4/20', value: Math.floor(Math.random() * 100) ** 2 },
                        { time: '2021/4/21', value: Math.floor(Math.random() * 100) ** 2 },
                        { time: '2021/4/22', value: Math.floor(Math.random() * 100) ** 2 },
                        { time: '2021/4/23', value: Math.floor(Math.random() * 100) ** 2 },
                    ],
                    A2B1C1: [
                        { time: '2021/4/20', value: Math.floor(Math.random() * 100) ** 2 },
                        { time: '2021/4/21', value: Math.floor(Math.random() * 100) ** 2 },
                        { time: '2021/4/22', value: Math.floor(Math.random() * 100) ** 2 },
                        { time: '2021/4/23', value: Math.floor(Math.random() * 100) ** 2 },
                    ],
                    A3B1C1: [
                        { time: '2021/4/20', value: Math.floor(Math.random() * 100) ** 2 },
                        { time: '2021/4/21', value: Math.floor(Math.random() * 100) ** 2 },
                        { time: '2021/4/22', value: Math.floor(Math.random() * 100) ** 2 },
                        { time: '2021/4/23', value: Math.floor(Math.random() * 100) ** 2 },
                    ],
                },
                chartType: 'Pie',
                theme: '',
            },
        };
    },
    mounted() {
        // this.fakeQuery();
        // this.postData();
    },
    methods: {
        fakeQuery() {
            setTimeout(() => {
                this.$refs['diy-chart'].drawChart(this.post);
            }, 1500);
        },
        check(chartType) {
            this.post.chartType = chartType;
            this.$refs['diy-chart'].clear();
            this.fakeQuery();
        },

        postData() {
            const url = '/date_data';
            const params = {
                time: '123',
            };
            this.$api.post(url, params).then((res) => {
                this.$message.success(res.msg);
            });
        },
    },
};
</script>
<style lang="scss" scoped>
.home-box {
    height: 100%;
    width: calc(100% - 20px);
    margin: 10px;
    font-size: 14px;
    .header {
        width: 100%;
        display: flex;
        height: 40px;
        align-items: center;
        .l20 {
            margin-left: 20px;
        }
    }
    .main {
        width: 100%;
        .dragOptionsBox {
            width: 150px;
            padding-right: 20px;
            height: 100%;
            // margin-top: 50px;
            border-right: 1px solid #ccc;
            overflow: auto;
            float: left;
        }
        .main-right {
            width: calc(100% - 175px);
            height: 100%;
            margin-left: 175px;
            // background: lightblue;
        }
    }
}

.chart-box {
    height: 500px;
    width: 500px;
    border: 1px solid #ccc;
}
.btn {
    cursor: pointer;
}
</style>
